<template>
  <div class="yongpin">
    <van-search
      v-model="value"
      show-action
      shape="round"
      clearable
      placeholder="伴手礼回礼"
    >
      <template #left>
        <van-icon class="scan" name="scan" size="18" />
      </template>
      <template #action>
        <van-icon class="cart" name="cart-o" size="18" />
        <van-icon class="service" name="service-o" size="18" />
      </template>
    </van-search>

    <div class="body">
      <div class="f1">
        <van-notice-bar
          left-icon="volume-o"
          scrollable
          text="尊敬的客户：受疫情交通管制影响，上海、金华等地区部分商品不能发货，发货详情可咨询在线客服，给您造成的不便，敬请谅解"
        />
      </div>
      <div class="f2">
        <van-grid :column-num="5">
          <van-grid-item
            icon="https://qnm.hunliji.com/o_1evocmuvl2jk1nou5lq1f9k1vsi9.png"
            text="伴手礼"
          />
          <van-grid-item
            icon="http://qnm.hunliji.com/o_1bu0ogcrb521n136adlne1mnqg.png"
            text="婚房布置"
          />
          <van-grid-item
            icon="http://qnm.hunliji.com/o_1b721dqu01hudvif1dtt18151rdc7.png"
            text="鞋包内衣"
          />
          <van-grid-item
            icon="https://qnm.hunliji.com/o_1e4d9ej7q1k4qdqj1o16uvf13vr12.png"
            text="喜糖请柬"
          />
          <van-grid-item
            icon="http://qnm.hunliji.com/o_1b8tjuel71agb1t971upi1nh1dpde.png"
            text="接亲婚宴"
          />
          <van-grid-item
            icon="http://qnm.hunliji.com/o_1bgfubmla1u3r1n431ihn18cf1s9f9.png"
            text="新郎穿搭"
          />
          <van-grid-item
            icon="https://qnm.hunliji.com/o_1dlj4gufg6jg12lo8fj73n1j2j.png"
            text="新娘嫁妆"
          />
          <van-grid-item
            icon="https://qnm.hunliji.com/o_1dlj4c2e51i1np94jc9149u1bp2e.png"
            text="婚庆床品"
          />
          <van-grid-item
            icon="https://qnm.hunliji.com/o_1edl2sbp5f0h1an1didqgbcb9.png"
            text="结婚酒水"
          />
          <van-grid-item icon="/img/circle.png" text="全部分类" />
        </van-grid>
      </div>
      <div class="f4">
        <van-cell value="更多" is-link>
          <template #title>
            <span class="custom-title">限时购</span>
            <van-count-down :time="time">
              <template #default="timeData">
                <span class="block">{{ timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.seconds }}</span>
              </template>
            </van-count-down>
          </template>
        </van-cell>
        <div class="f41">
          <div class="f411">
            <img src="/img/yongpin2/1.jpg" alt="" />
            <p>创意网红新房卧室客厅窗帘绑绳挂件</p>
            <span>￥16.15</span>
          </div>
          <div class="f411">
            <img src="/img/yongpin2/2.jpg" alt="" />
            <p>
              【包邮】高端森系含奢侈品实用手提亚克力礼盒伴郎伴娘回礼结婚回礼母亲节情人节生日礼物
            </p>
            <span>￥16.15</span>
          </div>
          <div class="f411">
            <img src="/img/yongpin2/3.jpg" alt="" />
            <p>郎酒红花郎+53度500ml</p>
            <span>￥16.15</span>
          </div>
        </div>
      </div>
      <div class="f3">
        <div class="f31">
          <span>结婚必买清单</span>
          <p>婚前倒计时30天必看</p>
          <div>
            <img src="/img/yongpin1/1.png" alt="" />
            <img src="/img/yongpin1/2.png" alt="" />
          </div>
        </div>
        <div class="f31">
          <span>人气热销榜单</span>
          <p>结婚必买Top 10</p>
          <div>
            <img src="/img/yongpin1/3.png" alt="" />
            <img src="/img/yongpin1/4.png" alt="" />
          </div>
        </div>
        <div class="f31">
          <span>母亲节礼品清单</span>
          <p>实用高颜值</p>
          <div>
            <img src="/img/yongpin1/5.png" alt="" />
            <img src="/img/yongpin1/6.png" alt="" />
          </div>
        </div>
        <div class="f31">
          <span>婚礼布置好物</span>
          <p>一次布齐三大气氛现场</p>
          <div>
            <img src="/img/yongpin1/7.png" alt="" />
            <img src="/img/yongpin1/8.png" alt="" />
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="active">
      <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/linggan" icon="fire-o">婚礼灵感</van-tabbar-item>
      <van-tabbar-item to="/yongpin" icon="shop-o">结婚用品</van-tabbar-item>
      <van-tabbar-item to="/me" icon="friends-o">我们</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 2,
      value: "",
      time: 30 * 60 * 60 * 1000,
    };
  },
};
</script>

<style lang="scss">
.yongpin .van-search {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1;
  padding: 5px 12px;
  .van-search__action:active {
    background-color: #fff !important;
  }
  .scan,
  .cart {
    margin-right: 10px;
  }
}
.yongpin .body {
  margin-top: 44px;
  margin-bottom: 50px;
  padding: 0 10px;
  background-color: #f8f8f8;
  .f1 {
    padding: 10px 0 5px 0;
    .van-notice-bar {
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      border-radius: 10px;
    }
  }
  .f2 {
    padding: 5px 0;
    .van-grid-item__icon {
      font-size: 40px;
    }
  }
  .f3 {
    padding: 5px 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .f31 {
      width: 44%;
      background-color: #fff;
      padding: 10px;
      span {
        font-size: 14px;
        font-weight: 600;
      }
      p {
        font-size: 12px;
        color: gray;
      }
      div {
        display: flex;
        justify-content: space-around;
        img {
          width: 30%;
        }
      }
    }
    .f31:nth-child(1),
    .f31:nth-child(2) {
      border-bottom: 5px solid #f8f8f8;
    }
  }
  .f4 {
    padding: 5px 0;
    background-color: #fff;

    .van-cell__title {
      display: flex;
      align-items: center;
      .van-count-down {
        margin-left: 10px;
        .colon {
          display: inline-block;
          margin: 0 4px;
          color: #ee0a24;
        }
        .block {
          display: inline-block;
          width: 22px;
          color: #fff;
          font-size: 12px;
          text-align: center;
          background-color: #ee0a24;
        }
      }
    }
    .f41 {
      display: flex;
      justify-content: space-around;
      .f411 {
        img {
          width: 110px;
          height: 110px;
          border-radius: 10px;
        }
        p {
          font-size: 12px;
          width: 100px;
          overflow: hidden; /*超出部分隐藏*/
          white-space: nowrap; /*禁止换行*/
          text-overflow: ellipsis; /*省略号*/
        }
        span {
          font-size: 12px;
          color: red;
        }
      }
    }
  }
}
.yongpin .van-tabbar-item--active {
  color: red;
}
</style>